<template>
  <div class="docDialog">
    <el-form :model="dialogForm" label-width="120px">
      <el-form-item label="标题">
        <el-input class="w-50pc" type="text" v-model="dialogForm.title"></el-input>
      </el-form-item>
      <el-form-item label="分类">
        <el-select v-model="dialogForm.classify" @change="changeClassify">
          <el-option v-for="item in classify" :key="item._id" :value="item._id" :label="item.title"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签">
        <el-select class="w-80pc" v-model="dialogForm.tag" multiple>
          <el-option v-for="item in tag" :key="item._id" :value="item._id" :label="item.title"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="缩略图">
        <el-upload
          ref="upload"
          :action="`${$api.defaults.baseURL}Document/uploadImg`"
          name="DocImg"
          list-type="picture-card"
          :on-success="imgFormSuccess"
          :headers="$headers"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="上传图片" class="none">
        <el-upload :action="`${$api.defaults.baseURL}Document/uploadImg`" name="DocImg" :on-success="imgSuccess" :headers="$headers"> </el-upload>
      </el-form-item>
      <el-form-item label="内容">
        <quill-editor v-model="dialogForm.body" ref="QuillEditor" :options="editorOption">
          <!-- @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @ready="onEditorReady($event)" -->
        </quill-editor>
      </el-form-item>
      <el-form-item>
        <el-button class="w-188 py-14" type="primary" @click="dialogFormSub">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor } from "vue-quill-editor";
import { mapState } from "vuex";

const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // toggled buttons
  ["blockquote", "code-block"],
  [{ header: 1 }, { header: 2 }], // custom button values
  [{ list: "ordered" }, { list: "bullet" }],
  [{ script: "sub" }, { script: "super" }], // superscript/subscript
  [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
  [{ direction: "rtl" }], // text direction
  [{ size: ["small", false, "large", "huge"] }], // custom dropdown
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  [{ font: [] }],
  [{ align: [] }],
  ["clean"], // remove formatting button
  ["link", "image", "video"],
];
export default {
  name: "docDialog",
  components: { quillEditor },
  props: { form: Object },
  computed: {
    ...mapState(["classify"]),
    Quill() {
      return this.$refs.QuillEditor.quill;
    },
  },
  data() {
    return {
      dialogForm: {
        title: "",
        classify: "",
        tag: [],
        thumbnail: "",
        body: "",
      },
      tag: [],
      editorOption: {
        // some quill options
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: function(value) {
                if (value) {
                  document.querySelector("#upload").click();
                } else {
                  console.log(this.quill);
                }
              },
            },
          },
        },
      },
    };
  },
  methods: {
    imgFormSuccess(res) {
      if (res.Code == 200) this.dialogForm.thumbnail = res.Data;
      else this.$message.error("图片插入失败");
    },
    imgSuccess(res) {
      if (res.Code == 200) {
        let length = this.Quill.getSelection().index;
        this.Quill.insertEmbed(length, "image", res.Data);
        this.Quill.setSelection(length + 1);
      } else {
        this.$message.error("图片插入失败");
      }
    },
    changeClassify() {
      this.tag = this.dialogForm.classify == "" ? [] : this.classify.find(v => v._id == this.dialogForm.classify).tag;
      this.dialogForm.tag = [];
    },
    async dialogFormSub() {
   

      const { data } = await this.$api[this.dialogForm._id ? "put" : "post"]("/Document", this.dialogForm);
      if (data.Code == 200) {
        this.$message.success(data.Msg);
        this.dialogForm = { title: "", classify: "", tag: "", body: "" };
        this.$refs.upload.clearFiles();
        this.$emit("success");
      } else this.$message.error(data.Msg);
    },
    changeForm(row) {
      this.dialogForm = { ...row };
      if (row.classify) {
        this.tag = this.classify.find(v => v._id == row.classify).tag;
      }
    },
  },
  mounted() {
    if (JSON.stringify(this.form) != "{}") this.changeForm(this.form);
    // else this.changeForm({ title: "", classify: "", tag: "", body: "" });
    // else this.changeForm({ title: new Date().getMilliseconds(), classify: "61c2f1e49eeb2c5eeca903a8", tag: "61c2f1e49eeb2c5eeca903a9", body: "<p>a</p>" });
  },

  watch: {
    form(row) {
      this.changeForm(row);
    },
  },
};
</script>

<style lang="less"></style>
